/* 任务面板 与 ToggleButton ScrollText 关联 */

.FuncBlock {
    --controlLen: 414;
    /* 块宽度 */
    /* --blockWide: 386px; */
    --blockWide: calc(var(--controlLen, 414) * 0.9323 * 1px);
    /* 块高度 */
    /* --blockHigh: 72px; */
    --blockHigh: calc(var(--blockWide) * 0.1865);
    /* 图标大小 */
    /* --iconSize: 44px; */
    --iconSize: calc(var(--blockWide) * 0.114);
    /* 字体大小 */
    /* --fontSize: 14px; */
    --fontSize: calc(var(--blockHigh) * 0.1944);
    /* 字体框长度 */
    --labelWide: calc(var(--blockWide) * 0.3523);
    /* 块颜色 */
    --blockColor: var(--StandardWhite, rgba(255, 255, 255, 1));
    /* 块阴影 */
    --blockShadowColor: var(--ShadowBlue, rgba(207, 215, 255, 1));
    /* 图标颜色 */
    --iconColor: var(--iconWhitergba, rgba(245, 245, 245, 1));
    /* 字体颜色 */
    --labelColor: var(--FontLightBlack, rgba(119, 131, 143, 1));

    width: fit-content;
    margin-top: calc(var(--blockWide) * 0.0625);
}

.FuncBlock .back {
    position: relative;
    width: var(--blockWide);
    border-radius: 10px;
    background: var(--blockColor);
    box-shadow: 0px 0px 18px var(--blockShadowColor);
}

/* 头部模块 */
.FuncBlock .headBox {
    position: relative;
    width: var(--blockWide);
    height: var(--blockHigh);
}

/* .funcBlock .headBox:hover + .tailBox {
    max-height: calc(var(--blockHigh) * 10);
} */

/* 尾部模块自适应 */
.FuncBlock .tailBox {
    position: relative;
    width: var(--blockWide);
    overflow: hidden;

    max-height: 0;
    transition: max-height 1s ease-in-out;
}

/* 开关位置调整 */
.FuncBlock .ToggleButton {
    float: right;

    transform: translate(
        calc(var(--blockWide) * -0.05),
        calc((var(--blockHigh) - var(--buttonHeight)) * 0.5)
    );
}

/* 图标 */
.FuncBlock .icon {
    float: left;
    width: var(--iconSize);
    height: var(--iconSize);
    background-color: var(--iconColor);
    opacity: 1;
    border-radius: calc(var(--iconSize) * 0.25);
    display: flex;
    justify-content: center;
    align-items: center;

    transform: translate(
        calc(var(--blockWide) * 0.05),
        calc((var(--blockHigh) - var(--iconSize)) * 0.5)
    );
}

/* 图像 */
.FuncBlock span i {
    display: inline-block;
    width: calc(var(--iconSize) * 0.6);
    height: calc(var(--iconSize) * 0.6);
    background-size: 100%;
}

/* 标签 */
.FuncBlock .label {
    width: var(--labelWide);
    float: left;
    font-size: var(--fontSize);
    font-weight: 400;
    color: var(--labelColor);
    height: calc(var(--fontSize) * 1.1);

    transform: translate(
        calc(var(--blockWide) * 0.1),
        calc((var(--blockHigh) - var(--fontSize) * 1.1) * 0.5)
    );
}

.FuncBlock .tailBox {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.FuncBlock .line {
    width: calc(var(--blockWide) * 0.8501);
    height: calc(var(--blockWide) * 0.0052);

    background-color: var(--iconColor);
}